<template>
  <div class="app-container">
    <div class="wise-crud">
      <div class="table-show">
        <div class="operation-block">
          <el-row class="oper-btn" :gutter="10">
            <el-col :span="16">
              <el-button type="primary" @click="downloadFn('add',null)"><i class="el-icon-plus" />添加</el-button>
            </el-col>
            
          </el-row>
        </div>
        <div class="wise-table">
          <el-table :data="tableData" border highlight-current-row>
            <el-table-column type="index" width="50" />
            <!--            <el-table-column v-if="checkPermission(['superSysOpsAdmin'])" label="所属项目">-->
            <!--              <template slot-scope="scope">-->
            <!--                {{ scope.row.spaceInfo.name }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="焊口编号" width="200">
              <template slot-scope="scope"  >
                <template v-if="scope.row.jointNumber">
                  {{scope.row.jointNumber }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="焊口类型"  width="100">
              <template slot-scope="scope">
                 
                  {{ scope.row.type }}
                
              </template>
            </el-table-column>
            <el-table-column label="焊口数量"  width="200">
              <template slot-scope="scope">
                
                  {{ scope.row.quantity }}
             
              </template>
            </el-table-column>
            <el-table-column label="工艺编码"  width="200">
              <template slot-scope="scope">
                
                  {{ scope.row.serialNum }}
             
              </template>
            </el-table-column>
            <el-table-column label="站点代码"  >
              <template slot-scope="scope">
                
                  {{ scope.row.pcode }}
             
              </template>
            </el-table-column>
            <el-table-column label="机组编码"  width="200">
              <template slot-scope="scope">
                
                  {{ scope.row.sitecode }}
             
              </template>
            </el-table-column>
            <el-table-column label="焊层类型"  width="200">
              <template slot-scope="scope">
                
                  {{ scope.row.layerType }}
             
              </template>
            </el-table-column>
            
            <el-table-column label="操作" style="width: 500px;">
              <template slot-scope="scope">
                <!-- <el-button
                  type="primary"
                  size="small"
                  round
                  @click.native.prevent="setDeptHandle(scope.row)"
                  >设置</el-button
                > -->
                <el-button   type="info" size="small" round
                  @click.native.prevent="
                    downloadFn('upd' , scope.row)
                  ">编辑</el-button>
                <el-button type="danger" size="small" round @click.native.prevent="removeHandle(scope.row)">删除
                </el-button>
           
                  <el-button   type="danger" size="small" round
                  @click.native.prevent="dayinCode(scope.row)">打印编码</el-button>

              </template>
            </el-table-column>
          </el-table>
          <div class="page-block">
            <pagination :background="true" layout="total,prev, pager, next" :total="ts" :page.sync="page.p"
              :limit.sync="page.ps" @pagination="getTableData" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialog" width="30%">
        <el-form ref="ruleForm" :model="obj" :rules='rules' label-width="100px" label-suffix="：">
          <el-form-item label="焊口编码" prop="jointNumber">
            <el-input v-model="obj.jointNumber"  :maxlength="35"  placeholder="焊口编码" />
            
          </el-form-item>
          <el-form-item label="焊口类型" prop="type">
            <el-input v-model="obj.type"  :maxlength="35"  placeholder="焊口类型" />
          </el-form-item>
          <el-form-item label="焊口数量"  prop="quantity">
            <el-input v-model="obj.quantity" :maxlength="35"  placeholder="焊口数量" />
          </el-form-item>
          <el-form-item label="工艺编码" prop="serialNum">
            
              <el-select v-model="obj.serialNum" filterable clearable   placeholder="工艺编码">
                <el-option v-for="item in craftsList" :key="item.craftsNumber" :label="item.craftsNumber" :value="item.craftsNumber"
                  :disabled="item.disabled" />
              </el-select>
          </el-form-item>
          <el-form-item label="站点代码"  prop="pcode">
            <el-input v-model="obj.pcode"  :maxlength="35" placeholder="站点代码" />
          </el-form-item>
          <el-form-item label="机组编号"  prop="sitecode">
            <el-input v-model="obj.sitecode" :maxlength="35"  placeholder="机组编号" />
          </el-form-item>
          <el-form-item label="焊层类型"  prop="layerType">
            <el-input v-model="obj.layerType" :maxlength="35"  placeholder="焊层类型" />
          </el-form-item>
     
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="downloadSubmitHandle('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="打印" :visible.sync="drawerx" width="300px">
      <div id="printMeD">
        <div style="height: 20px;"></div>
      <table class="ttt" style="width: 400px; height:230px;">
        <tr>
          <td rowspan="4">
            <canvas class="canvas" style="float: left; width: 400px; height: 400px;" ref="qrcodeCanvas"></canvas>
          </td>
          <td style="padding-top: 20px;"  v-if="hkcodecd>20" >
            <label style=" white-space: nowrap; width: 280px;text-align: left; margin-top: 40px; font-size:16px; line-height: 30px;">  焊口编号:</label><br/>
            <label style="  width: 280px;text-align: left; margin-top: 40px; font-size:16px; line-height: 30px;"> {{ hkcode1}}</label><br/>
            <label style="  width: 280px;text-align: left; margin-top: 40px; font-size:16px; line-height: 30px;"> {{ hkcode2}}</label><br/>
          </td>
          <td style="padding-top: 20px;"  v-if="hkcodecd<=20" >
            <label style=" white-space: nowrap; width: 280px;text-align: left; margin-top: 40px; font-size:16px; line-height: 30px;">  焊口编号:</label><br/>
            <label style="  width: 280px;text-align: left; margin-top: 40px; font-size:16px; line-height: 30px;"> {{ hkcode}}</label>
          </td>
        </tr>
        <tr>
       
          <td  >
            <label style=" white-space: nowrap; width: 280px;text-align: left; margin-top: 20px;font-size:16px; line-height: 30px;">  工艺规程:{{ craftsNumber }}</label><br/>
 
          </td>
          
        </tr>
        <tr>
       
       <td >
        <label style=" white-space: nowrap; width: 280px;text-align: left;margin-top: 20px; font-size:16px;line-height: 30px;">  施工单位:{{sgdw }}</label><br/>
 
       </td>
       
     </tr>
     <tr>
       
       <td>
            
        <label style="  white-space: nowrap; width:280px;text-align: left; margin-top: 20px; font-size:16px; line-height: 30px;">  预制日期:{{nowTime}}</label><br></br>
  
       </td>
       
     </tr>
      </table>
          
       
 
      </div>
      <div slot="footer" class="dialog-footer">
       
        <el-button v-print="{
            id: 'printMeD',
            popTitle: ''
          }" type="primary">打印</el-button>
      </div>
    </el-dialog>
     
  </div>
</template>

<script>
//const wewin = require("npm-wewin-print-demo");
  import {
    postHandle
  } from '@/api'
  import Pagination from '@/components/Pagination/index'
  import {
    imgPath
  } from '@/filters'
  import checkPermission from '../../utils/permission'
  import QRCode from 'qrcode'
 
  export default {
 
    name: 'MemberManage',
    components: {
      Pagination,
     
   
    },
    data() {
      return {
        
        urls: {
          list: "/api/v1/welder-sbtx-second/welded-joint-info-comb/list",
          listCrafts: "/api/v1/welder-sbtx-second/crafts-info-comb/list",
          add: "/api/v1/welder-sbtx-second/welded-joint-info-comb/create",
          show: "/api/v1/welder-sbtx-second/welded-joint-info-comb/show/",
          update: "/api/v1/welder-sbtx-second/welded-joint-info-comb/update/",
          delete: "/api/v1/welder-sbtx-second/welded-joint-info/remove/",
        },
        rules: {
          jointNumber: [
          {
            required: true,
            message: '请输入焊口编号',
            trigger: 'blur',
          },
        ],   type: [
          {
            required: true,
            message: '请输入焊口类型',
            trigger: 'blur',
          },
        ],   
        
        pcode: [
          {
            required: true,
            message: '请输入站点代码',
            trigger: 'blur',
          },
        ],  
         serialNum: [
          {
            required: true,
            message: '请选择工艺编码',
            trigger: 'blur',
          },
        ],   sitecode: [
          {
            required: true,
            message: '请输入机组编号',
            trigger: 'blur',
          },
        ],
       },
        searchUserName: '',
        nowTime: null,
            hkcode:"",
            hkcode1:"",
            hkcode2:"",
            hkcodecd:0,
            craftsNumber:"",
            xmbh:"",
            sgdw:"",
            teamCode:"",
            siteCode:"",
            layerType:"",
           
        title: '',
        search: {
          key: '',
          fields: ['name']
        },
        tableData: [],
        obj:{
          id: null,
          jointNumber: null,
          type: null,
          quantity: null,
          spaceId: null,
          pcode: null,
          serialNum: null,
          sitecode: null,
          layerType: null
         
         
        },
        craftsList:[],
        dialog:false,
        drawerx:false,
        page: {
          p: 1,
          ps: 10
        },
        ts: 0,

        filterMethod(query, item) {
          return item.name.indexOf(query) > -1
        },
        loading: false
      }
    },

    computed: {
      spaceId() {
        return this.$store.state.project.spaceId
      },
      entSpaceId() {
        return this.$store.getters.entSpaceId
      }
    },
    mounted: function () {
       
    },
    created() {
      this.getTableData()
      this.getXmcrafts()
      this. getNowTime()
     
    },
    methods: {
      

 
      getNowTime() {
           var date = new Date();
           var sign2 = ":";
           var year = date.getFullYear() // 年
           var month = date.getMonth() + 1; // 月
           var day = date.getDate(); // 日
           var hour = date.getHours(); // 时
           var minutes = date.getMinutes(); // 分
           var seconds = date.getSeconds() //秒
           var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
           var week = weekArr[date.getDay()];
            // 给一位数的数据前面加 “0”
           if (month >= 1 && month <= 9) {
                month = "0" + month;
           }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
             hour = "0" + hour;
             }
           if (minutes >= 0 && minutes <= 9) {
              minutes = "0" + minutes;
            }
           if (seconds >= 0 && seconds <= 9) {
              seconds = "0" + seconds;
          }
      this.nowTime =  year + "-" + month + "-" + day  ;
     } ,
     generateQRCode(text) {
      this.$nextTick(() => {
        const canvas = this.$refs.qrcodeCanvas
        QRCode.toCanvas(canvas, text, function (error) {
        if (error) {
          console.error(error)
        }
      })
      })
     
     
  },
      downloadFn(txt,rw) {
      
        if(txt==="add"){
          this.obj.id=null;
          this.obj.jointNumber=null;
          this.obj.type=null;
          this.obj.spaceId=this.spaceId;
          this.obj.quantity=null;   
          this.obj.serialNum=null;
          this.obj.pcode=null;
          this.obj.sitecode=null;
          this.obj.layerType=null;
          this.title="添加"
        }else if(txt==="upd"){
          this.obj.id=rw.id;
          this.obj.jointNumber=rw.jointNumber;
          this.obj.type=rw.type;
          this.obj.quantity=rw.quantity;   
          this.obj.spaceId=this.spaceId;
          this.obj.serialNum=rw.serialNum;
          this.obj.pcode=rw.pcode;   
          this.obj.sitecode=rw.sitecode;   
          this.obj.layerType=rw.layerType;   
          this.title="编辑"
        }
  
        this.dialog = true
      },
      downloadSubmitHandle(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
        let ee="";
        if(this.obj.id==null){
            ee=this.urls.add
        }else{
            ee=this.urls.update+this.obj.id
        }
       
        postHandle(
            ee,{obj: this.obj}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
          this.dialog = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      },
      checkPermission,
 
      dayinCode(row){
      
        this.hkcode=row.jointNumber,
        this.hkcodecd= this.hkcode.length;
        if(this.hkcode.length>20){
          this.hkcode1=row.jointNumber.substring(0,20);
          this.hkcode2=row.jointNumber.substring(20,this.hkcode.length);
        }else{
         
        }
      
     
      
 
        this.craftsNumber=row.serialNum,
        this.sgdw=row.projectInfo.name,
        this.xmbh=row.projectInfo.welderNumber,
        this.teamCode=row.teamCode,
        this.siteCode=row.sitecode,
        this.layerType=row.layerType,
        this.drawerx=true;

        let ax="{\"PIPE\":{\"weldCode\":\""+this.hkcode+"\",\"teamCode\":\""+this.teamCode+"\",\"siteCode\":\""+this.siteCode+"\",\"process\":\""+this.craftsNumber+"\",\"layerType\":\""+this.layerType+"\",\"spaceId\":\""+this.layerType+"\"}}" 
        
        this.generateQRCode(ax);





        // this.$router.push({
        //   name: "dayin1",
        //   params:{
        //   
        //   }
        // });
    
         
      },
      handleDialog(type, id) {
        this.$nextTick(() => {
          //this.$refs.userDialog.open(type, id)
        })
      },
      setDeptHandle(row) {
        this.$nextTick(() => {
          //this.$refs.deptDialog.settingHandle(row)
        })
      },
        getStrLeng(str){
        var realLength = 0;
        var len = str.length;
        var charCode = -1;
        for(var i = 0; i < len; i++){
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) { 
                realLength += 1;
            }else{ 
                // 如果是中文则长度加2
                realLength += 2;
            }
        } 
        return realLength;
    },
 
      getTableData() {
        const req = {
          d: {
           
            filters: [{
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.spaceId
            },{
              field: 'st',
              operator: 'NE',
              value:9
            }],
            page: this.page,
            search: this.search,
            retPage: true
          },
          // obj: {
          //   username: this.searchUserName
          // }
        }
        postHandle(
           this.urls.list,
          req
        ).then((response) => {
          this.tableData = response.result
          this.ts = response.page.ts
        })
      },getXmcrafts() {
        const req = {
          d: {
           
            filters: [{
              field: 'entSpaceId',
              operator: 'EQUALS',
              value: this.entSpaceId
            },{
              field: 'st',
              operator: 'NE',
              value:9
            }],
            page: this.page,
            search: this.search,
            retPage: true
          },
          // obj: {
          //   username: this.searchUserName
          // }
        }
        postHandle(
           this.urls.listCrafts,
          req
        ).then((response) => {
          this.craftsList = response.result
      
        })
      },

      removeHandle(row) {
        this.$confirm('您确定要移除该成员, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.deleteObjectById(row.id)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消移除'
            })
          })
      },

      deleteObjectById(id) {
        postHandle(
            '/api/v1/welder-uac-second/space-organization-member-comb/remove-member/' + id, {}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
      },

      switchShow(id){
        postHandle(
            'hapi/v1/welder-sbtx-second/space-comb/updateShow/' + id, {}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
      },
      switchHandle(id,sw){
        
        if(sw==1){
          postHandle(
            '/api/v1/welder-sbtx-second/space-comb/updateShow/' + id, {}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '移除成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
        }else{
          postHandle(
            '/api/v1/welder-sbtx-second/space-comb/updateHandle/' + id, {}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '移除成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
        }
        
      }
    }
  }
</script>

<style>
  .el-transfer .el-checkbox {
    display: block;
  }
  #printMeD{
    height: 500px;
  }
  #qqq {
  background-color: #ffffff;
  width: 480px;
  height:400px;
  position:absolute;
  margin: 0 auto; /*水平居中*/
   
 
  /* -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);    
  */
  
}
.ttt{
 margin-left: -110px;
  margin-top: 90px;
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);   
  
}
#qrCode {
  display: inline-block;
  margin: 0 auto; /*水平居中*/
  position: relative;
  margin: 20px;
 

}

.img {
    width: 360px;
    height: 360px;
    background-color: #fff;
    padding: 6px; 
  }
</style>

 